@ts-nocheck
<template>
  <div
    class="sider"
    :style="{ width: showSidebar ? sidebarWidth + 'px' : '0px' }"
  >
    <el-scrollbar height="100%">
      <transition name="el-zoom-in-center">
        <div class="sider-content" v-show="showSidebar">
          <div class="card-wrapper-blank triggers-container">
            <TimerTrigger />
            <DiversionTrigger />
            <NaviButton />
          </div>
          <!-- <GlobalNotes /> -->
          <ATIS />
          <RunwayCard />
          <FlowWidget />
          <!-- <WidgetCEM /> -->
          <NOTAM />
          <ActivityCard />
        </div>
      </transition>
    </el-scrollbar>
    <span
      :class="[
        'sider-controller',
        showSidebar ? '' : 'sider-controller-hidden',
        darkMode ? 'sider-controller-dark' : '',
      ]"
      @click="handleClick"
    >
      <el-icon size="small" :color="darkMode ? '#FFFFFF' : '#000000'">
        <CaretLeft v-if="showSidebar" />
        <CaretRight v-else />
      </el-icon>
    </span>
  </div>
</template>

<script>
import ATIS from "@/views/ATIS/index.vue";
import NOTAM from "@/views/NOTAM/index.vue";
import GlobalNotes from "@/views/GlobalNotes/index.vue";
import ActivityCard from "@/views/Activity/Card/index.vue";
import RunwayCard from "@/views/Activity/Runway/Widget/index.vue";
// import WidgetCEM from "@/views/CEM/Widget/index.vue";
import FlowWidget from "@/views/FlowStatus/Widget/index.vue";
import TimerTrigger from "@/views/Journal/Timer/trigger.vue";
import DiversionTrigger from "@/views/Journal/DiversionShare/triggerButton.vue";
import NaviButton from "@/views/ATCOS/NaviButton.vue";

import commonStore from "@/store/common";
import { mapWritableState } from "pinia";
export default {
  components: {
    ATIS,
    NOTAM,
    ActivityCard,
    GlobalNotes,
    // WidgetCEM,
    FlowWidget,
    RunwayCard,
    TimerTrigger,
    DiversionTrigger,
    NaviButton,
  },
  data() {
    return {
      // showATIS: true,
    };
  },
  computed: {
    ...mapWritableState(commonStore, [
      "darkMode",
      "showSidebar",
      "sidebarWidth",
    ]),
  },
  methods: {
    handleClick() {
      this.showSidebar = !this.showSidebar;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/card.css";

.sider {
  position: fixed;
  top: 60px;
  left: 0px;
  width: 200px;
  bottom: 24px;
  /* padding: 12px 6px; */
  z-index: 21;
  border-right: 1px solid rgba(128, 128, 128, 0.2);
  transition: all 0.3s ease-in-out;
  background-color: var(--el-bg-color);
}

.sider-content {
  padding: 24px 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 4px;
}

.sider-controller {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
  transform: rotate(0deg);
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  bottom: 32px;
  left: 176px;
  border-radius: 12px 0 0 12px;
  /* border: 1px solid #ddd; */
  background-color: #ddd;
  user-select: none;
  cursor: pointer;
}

.sider-controller-hidden {
  /* transform: rotate(180deg); */
  left: 0px;
  border-radius: 0 12px 12px 0;
}

.sider-controller-dark {
  background-color: #444;
}

.triggers-container {
  // width: 160px;
  padding: 4px 8px;
  // height: 36px;
  // background-color: var(--el-color-primary-light-9);
  background-color: var(--el-color-primary-light-7);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  // width: 100%;
  position: relative;
  overflow: hidden;
  // border:1px solid var(--el-color-primary-light-3);
  border:1px solid var(--el-color-primary);
}

.triggers-container > * {
  margin: 0 4px;
}
</style>
